const navA = document.querySelector("#logout");

navA.addEventListener("click", function (e) {
  if (confirm("是否退出?")) {
    localStorage.removeItem("cms");
    location.href = "../index.html";
  }
});
const salary = document.querySelector('[name="salary"]');
const studentCount = document.querySelector('[name="student_count"]');
const age = document.querySelector('[name="age"]');
const groupCount = document.querySelector('[name="group_count"]');

//获取数据,渲染四个框
async function dashboard() {
  const res = await axios({
    url: "/dashboard",
  });
  console.log(res);
  const { overview, year, salaryData,groupData } = res.data.data;
  salary.innerHTML = overview.salary;
  studentCount.innerHTML = overview.student_count;
  age.innerHTML = overview.age;
  groupCount.innerHTML = overview.group_count;
  yearSalary(year);
  salary1(salaryData);
  group(groupData,1)
  boyGirlEchart (salaryData)
  const btns=document.querySelector('#btns')
  btns.addEventListener('click',function(e){
    if (e.target.nodeName=='BUTTON') {
      btns.querySelector('.btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
      const i=e.target.innerHTML.trim()
      group(groupData,i)
    }
  })

}


//渲染折线图
function yearSalary(list) {
  const myChart = echarts.init(document.querySelector("#line"));
  const option = {
    // 标题部分的设置
    title: {
      text: "2021全学科薪资走势",
      top: "2%",
      left: "3%",
    },
    // 图表
    grid: {
      // 设置上下左右的间隙
      top: "15%",
      left: "10%",
      right: "10%",
      bottom: "10%",
    },
    // x轴的设置
    xAxis: {
      type: "category",
      data: list.map((item) => item.month), // 箭头行数 一行代码 省略 {} return
      // x轴线段设置
      axisLine: {
        // 线段的样式
        lineStyle: {
          // 类型 虚线
          type: "dashed",
          // 颜色
          color: "#d3d3d3",
        },
      },
      // x轴文本设置
      axisLabel: {
        // 颜色
        color: "black",
      },
    },
    // y轴的设置
    yAxis: {
      type: "value",
      // 分割线
      splitLine: {
        // 线的样式
        lineStyle: {
          type: "dashed", // 类型
          // width:20, // 宽度
          color: "deepskyblue", // 颜色
        },
      },
    },
    color: ["#5f8eff"],
    // 提示框 设置了才会出现
    tooltip: {
      show: true,
    },
    series: [
      {
        data: list.map((item) => item.salary),
        type: "line",
        // 圆圈
        smooth: true,
        // 圆圈大小
        symbolSize: 10,
        // 线宽
        lineStyle: {
          width: 8,
        },
        // 区域颜色
        areaStyle: {
          // 渐变
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#aed4ff", // 0% 处的颜色
              },
              {
                offset: 0.7,
                color: "#ffffff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//渲染环形图
function salary1(list) {
  const myChart = echarts.init(document.querySelector("#salary"));
  const option = {
    title: {
      text: "班级薪资分布",
      // top: '2%',
      // left: '3%'
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "80%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: list.map((v) => {
          return {
            value: v.g_count + v.b_count,
            name: v.label,
          };
        }),
      },
    ],
  };
  myChart.setOption(option);
}
//渲染柱状图
function group(list,i) {
  const myChart = echarts.init(document.querySelector("#lines"));
  const option = {
    // x轴设置
    xAxis: {
      type: "category",
      data: list[i].map(item=>item.name),
      // 线段设置
      axisLine: {
        // 线的样式
        lineStyle: {
          type: "dashed",
          color: "#d4d4d6",
        },
      },
    },
    yAxis: {
      type: "value",
      // 分割线设置
      splitLine: {
        // 线的样式
        lineStyle: {
          type: "dashed",
          color: "#d4d4d6",
        },
      },
    },
    // 颜色
    color: [
      // 渐变
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#34d29a", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#d4f5ea", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#499fed", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#d8eafb", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    ],
    series: [
      // 柱状图 给多个图形,会有柱形
      {
        data:list[i].map(item=>item.hope_salary),
        type: "bar",
      },
      {
        data:list[i].map(item=>item.salary),
        type: "bar",
      },
    ],
  };
  myChart.setOption(option);
}
//男女薪资分布
function boyGirlEchart (salaryData) {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector('#gender'))

  // 指定图表的配置项和数据
  const option = {
    // title可以设置一个数组 给多个标题
    title: [
      {
        text: '男女薪资分布',
        top: '3%',
        left: '4%'
      },
      {
        text: '男生',
        left: 'center',
        top: '45%'
      },
      {
        text: '女生',
        left: 'center',
        top: '85%'
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      show: false
    },
    color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        // 圆心的位置
        center: ['50%', '30%'],
        data: salaryData.map(v => {
          return {
            value: v.b_count,
            name: v.label
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['25%', '35%'],
        center: ['50%', '70%'],
        data: salaryData.map(v => {
          return {
            value: v.g_count,
            name: v.label
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
dashboard();
